<template>
  <div class="edit">
    <div class="content">
      <el-form ref="form" :model="form" label-width="100px" label-position="right">
        <el-row>
          <el-col :span="24">
            <el-form-item label="订单编号:">
                粽子（普通包装）
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名称:">
                食品
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单时间:">
                2022-06-22 12:12:12
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="" label-width="0px">
                <div class="list">
                  <div class="col-1" v-for="i in 5" :key="i">
                    <el-image style="width: 80px; height: 80px; margin-right: 12px;"
                      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="cover"></el-image>
                    <div>
                      <div class="col-1-title" style="line-height: 20px;">蒙牛 特仑苏 纯牛奶250ml*16每100ml含3.6g优质蛋白质 礼盒装</div>
                      <div style="line-height: 20px;">数量:2</div>
                    </div>
                  </div>

                  <div class="col-1" style="height: 0;"></div>
                  <div class="col-1" style="height: 0;"></div>
                  <div class="col-1" style="height: 0;"></div>
                </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="订单状态:">
              已删除
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="删除时间:">
                2022-06-22 12:12:12
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="删除原因:">
                重复购买
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ContentUpper',
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>
<style lang="scss" scoped>
  .content {
    padding-right: 50px;
  }
  .list{
    display: flex;
    flex-wrap: wrap;
    border: 2px solid #f2f2f2;
    width: 930px;
    margin-left: 24px;
    .col-1 {
      display: flex;
      align-items: center;
      height: 120px;
      margin-left: 14px;

      .col-1-title {
        width: 120px;
        height: 60px;
        margin-bottom: 7px;

        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 3; //行数
        -webkit-box-orient: vertical
      }
    }
  }
</style>
